<template>
  <div class="matchground">
    <div class="row">
      <div class="col-4 animate__animated animate__bounceInLeft player">
        <div class="user-photo">
          <img :src="$store.state.user.photo + '?random=' + Math.random()" alt="" />
        </div>
        <div class="user-username">{{ $store.state.user.username }}</div>
      </div>
      <div class="col-4 animate__animated animate__bounceInDown">
        <div class="user-select-bot">
          <select
            v-model="select_bot"
            class="btn btn-outline-info btn-lg form-select custom-option"
            :disabled="selectDisabled">
            <option value="-1" selected>SOLO</option>
            <option v-for="bot in bots" :key="bot.id" :value="bot.id">
              {{ bot.title }}
            </option>
          </select>
        </div>
      </div>
      <div class="col-4 animate__animated animate__bounceInRight player">
        <div class="user-photo">
          <img :src="$store.state.pk.opponent_photo" alt="" />
        </div>
        <div class="user-username">{{ $store.state.pk.opponent_username }}</div>
      </div>
      <div class="col-12 animate__animated animate__bounceInUp" id="start_matching">
        <button @click="click_match_btn" class="btn btn-outline-info btn-lg col-3">
          {{ match_btn_info }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { ref } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    let match_btn_info = ref("开始匹配");
    let bots = ref([]);
    let select_bot = ref("-1");
    let selectDisabled = ref(false); // 新增一个变量来控制select的禁用状态

    let timer; // 声明一个变量来存储定时器的引用
    const click_match_btn = () => {
      if (match_btn_info.value === "开始匹配") {
        selectDisabled.value = true; // 禁用select
        store.commit("updateStatus", "start-matching");
        match_btn_info.value = "正在匹配 : 0秒";
        let seconds = 0;
        timer = setInterval(() => {
          seconds++;
          match_btn_info.value = `正在匹配 : ${seconds}秒`;
        }, 1000);
        store.state.pk.socket.send(
          JSON.stringify({
            event: "start-matching",
            bot_id: select_bot.value,
          })
        );
      } else {
        // 取消匹配逻辑
        match_btn_info.value = "开始匹配";
        store.commit("updateStatus", "matching");
        store.state.pk.socket.send(
          JSON.stringify({
            event: "stop-matching",
          })
        );
        selectDisabled.value = false; // 启用select
        clearInterval(timer); // 清除定时器
      }
    };

    const refresh_bots = () => {
      $.ajax({
        url: "http://127.0.0.1:3000/user/bot/getlist/",
        type: "get",
        headers: {
          Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
          bots.value = resp;
        },
      });
    };

    refresh_bots();

    return {
      match_btn_info,
      click_match_btn,
      bots,
      select_bot,
      selectDisabled,
    };
  },
};
</script>

<style scoped>
div.matchground {
  width: 80vw;
  height: 80vh;
  margin: 5vh auto;
  background-color: rgba(50, 50, 50, 0.66);
  overflow: hidden;
}

.player {
  margin-top: 5%;
}

div.user-photo {
  text-align: center;
  padding-top: 15vh;
}

div.user-photo > img {
  border-radius: 50%;
  width: 30vh;
}

div.user-username {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: white;
  padding-top: 2vh;
}

#start_matching {
  text-align: center;
  /* padding-top: 10vh; */
}

div.user-select-bot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-top: -20%;
}

select.btn:hover {
  color: white;
}

div.user-select-bot > select {
  width: 82%;
  margin: auto auto;
  height: 11%;
}

button.btn {
  position: relative;
}

button.btn:hover {
  color: white;
}

button.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255);
  opacity: 1;
  animation: pulse 1s infinite;
}

button.btn:hover::before {
  opacity: 1;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scaleX(0); /* 修改动画效果，使用 scaleX */
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scaleX(1); /* 修改动画效果，使用 scaleX */
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) scaleX(2); /* 修改动画效果，使用 scaleX */
    opacity: 0;
  }
}
</style>
